<template>
   <div>
       <h1>专业列表</h1>
       <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>专业</td>
                    <td>所属课程</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in $store.state.subjects.subjects" :key='item._id'>
                    <td>{{item._id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.courses.length>0?item.courses.map(item=>item.name).join(";"):'暂无课程'}}</td>
                </tr>
            </tbody>
            <tfoot>
               <h2>{{$store.getters['subjects/showInfo']}}</h2>
            </tfoot>
       </table>
   </div>
</template>

<script>
export default {
    methods:{
        getAllSubjectsFromState(){
            //dispatch的参数1：表示是要调用的actions中的方法名
            this.$store.dispatch('subjects/getAllSubjectsAsync')
        }
    },
    created(){
        this.getAllSubjectsFromState()
    }
}
</script>

<style>

</style>